<template>
  <div class="app-wrapper">
    <sidebar ref="sidebarChild" class="table-sidebar-container" :tree-data="treeData1" @hideBtn="hideBtn" @getTable="getTable" />
    <div :class="{ 'app-row-close': !sidebar1.opened }" class="app-row">
      <ButtonGroup style="min-width:625px" :btn-show="btnShow" :btn-data="btnData" @BtnClick="BtnClick" />
      <InlineEditTable ref="child" :depart-ment="departMent" :table-height="tableHeight" :table-btn-data="tableBtnData" @rowClick="rowClick" />
    </div>
  </div>
</template>

<script>
import Sidebar from '@/components/Sidebar'
import ButtonGroup from '@/components/ButtonGroup'
import InlineEditTable from './components/InlineEditTable'
import { GetDepts, GetUserModuleBtns, btnMap, IconFilter } from '@/api/system'
import { setTimeout } from 'timers'
import { mapState, mapGetters } from 'vuex'
import * as R from 'ramda'

/* eslint-disable */
function filterLeft(lists) {
  const res = []
  lists.forEach(list => {
    const tmp = { ...list }
    tmp.title = list.deptContent || list.moduleName || ''
    tmp.expanded = false
    tmp.type = 1
    if (tmp.deptID === 3 || tmp.deptID === 1041) {
      tmp.expanded = true
    }
    if (tmp.child && tmp.child.length > 0) {
      tmp.children = filterLeft(tmp.child)
    }
    res.push(tmp)
  })
  return res
}

export default {
  name: 'User',
  components: {
    Sidebar,
    ButtonGroup,
    InlineEditTable
  },
  data() {
    return {
      tableHeight: 500,
      departMent: 'KM集团',
      node: {},
      rowData: null,
      btnShow: true,
      treeResponse: null,
      treeData1: [{
        title: 'node1',
        expanded: true,
        children: []
      }],
      btnData: [],
      tableBtnData: [],
      listLoading: false
    }
  },
  computed: {
    ...mapState({
      sidebar1: state => state.app.sidebar
    }),
    ...mapGetters([
      'roles',
      'userID'
    ])
  },
  mounted() {
    setTimeout(() => {
      this.setTableHeight()
    }, 100)
    window.addEventListener('resize', this.setTableHeight)
    this.getTreeData()
    GetUserModuleBtns({ moduleId: this.$route.meta.id, userId: this.userID }).then(response => {
      const data = response.data
      const isEven = n => n.btnName === '修改' || n.btnName === '删除' || n.btnName === '查看'
      const isNoEven = n => n.btnName !== '修改' && n.btnName !== '删除' && n.btnName !== '查看'
      const isDisable = n => n.name === '角色用户' || n.name === '角色权限' ? n.disabled = true : n.disabled = false
      const btnItem = x => { return { type: btnMap[x.backColor], name: x.btnName, icon: IconFilter(x.iCon) } }
      this.btnData = R.compose(R.forEach(isDisable), R.map(btnItem), R.filter(isNoEven))(data)
      this.tableBtnData = R.compose(R.map(btnItem), R.filter(isEven))(data)
    })
  },
  methods: {
    setTableHeight() {
      this.tableHeight = document.querySelector('.app-row').offsetHeight - 150
    },
    getTable(node) {
      this.node = node
      this.departMent = this.node.title
      this.$refs.child.getList(this.node.deptID)
      const isDisable = n => n.name === '角色用户' || n.name === '角色权限' ? n.disabled = true : n.disabled = false
      this.btnData.forEach(isDisable)
    },
    hideBtn() {
      this.btnShow = false
    },
    rowClick(rowData) {
      const isDisable = n => n.disabled = false
      this.btnData.forEach(isDisable)
      this.rowData = rowData
    },
    BtnClick(name) {
      if (name === '新增') {
        this.$refs.child.handleCreate(this.node.id)
      }
      if (name === '刷新') {
        this.$refs.child.getList(this.node.deptID)
      }
    },
    getTreeData() {
      GetDepts()
        .then(response => {
          this.treeResponse = response.data
          const resData = [
            {
              title: response.data.deptContent,
              deptCode: response.data.deptCode,
              deptID: response.data.deptID,
              expanded: true,
              type: 1,
              children: filterLeft(response.data.child)
            }
          ]
          this.treeData1 = resData
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  .table-sidebar-container {
    transition: width 0.28s;
    width: 300px !important;
    height: 100%;
    z-index: 1001;
    border-right: solid 1px #e6e6e6;
    overflow: hidden;
  }
  .app-row {
    width: calc(100vw - 510px);
    height: calc(100vh - 100px);
    padding: 10px;
    overflow: hidden;
  }
  .app-row-close {
    width: calc(100vw - 350px);
  }
}
.right-main-container {
  min-height: 100%;
  transition: margin-left 0.28s;
  position: relative;
}
.table-right-container {
  padding: 10px;
}
</style>

<style>
.el-dialog__body {
  padding-top: 10px;
}
</style>
